var Zoom = function(){
	this.width = 300;
	this.height = 300;
	this.scale = 4;
	this.imgURL = "1.jpg";
	this.container = null;
}
Zoom.prototype = {
	constructor:Zoom,
	init:function(){
		this.createDOM();
		this.findEvents();
	},
	createDOM:function(){
		//创建中图的div
		this.imgDiv = document.createElement("div");
		this.imgDiv.style.cssText = "width:"+this.width+"px;height:"+this.height+"px;position:relative;";
		this.container.appendChild(this.imgDiv);

		//创建中图
		this.img = document.createElement("img");
		this.img.src = this.imgURL;
		this.img.style.cssText = "width:"+this.width+"px;height:"+this.height+"px;"
		this.imgDiv.appendChild(this.img);
		
		
		//创建滤镜
		this.tool = document.createElement("div");
		this.tool.style.cssText = "width:"+(this.width/this.scale)+
			"px;height:"+(this.height/this.scale)+"px;position:absolute;left:0;top:0;background:#FFF;display:none;overflow:hidden;box-shadow:0 0 5px";
		this.imgDiv.appendChild(this.tool);
		
		//创建滤镜层中的图片
		this.toolImg = document.createElement("img");
		this.toolImg.src = this.imgURL;
		this.toolImg.style.cssText = "width:"+this.width+"px;height:"+this.height+"px;";
		this.tool.appendChild(this.toolImg);

		//创建放大区域
		this.zoomDiv = document.createElement("div");
		this.zoomDiv.style.cssText = "width:"+this.width+"px;height:"+this.height+"px;position:absolute;left:"+(this.imgDiv.offsetLeft + this.width + 20)+"px;top:"+ this.imgDiv.offsetTop +"px;overflow:hidden;display:none;";
		this.container.appendChild(this.zoomDiv);

		//大图片
		this.bigImg = document.createElement("img");
		this.bigImg.src = this.imgURL;
		this.bigImg.style.cssText = "width:"+(this.width*this.scale)+"px;height:"+(this.height*this.scale)+"px;";
		this.zoomDiv.appendChild(this.bigImg);
},
	findEvents:function(){
		var that = this;
		this.imgDiv.onmouseover = function(){
			that.tool.style.display = "block";
			that.zoomDiv.style.display = "block";
			that.img.style.webkitFilter = "blur(5px)";
			this.onmousemove = function(e){
			    e = window.event||e;
				var x = e.clientX - that.imgDiv.offsetLeft - that.tool.offsetWidth/2;
				var y = e.clientY - that.imgDiv.offsetTop - that.tool.offsetHeight/2;
				that.tool.style.left = Math.max(Math.min(x,that.width - that.tool.offsetWidth),0) + "px";
				that.tool.style.top = Math.max(Math.min(y,that.height - that.tool.offsetHeight),0) + "px";
				that.bigImg.style.marginLeft = -1*that.tool.offsetLeft*that.scale+"px";
				that.bigImg.style.marginTop = -1*that.tool.offsetTop*that.scale+"px";
				that.toolImg.style.marginLeft = -1*that.tool.offsetLeft + "px";
				that.toolImg.style.marginTop = -1*that.tool.offsetTop + "px";
			};
		};
		this.imgDiv.onmouseout = function(){
			that.tool.style.display = "none";
			that.zoomDiv.style.display = "none";
			that.img.style.webkitFilter = "blur(0)";
		};
	}
}